import React, { Component } from 'react';
import { View, Image, StyleSheet, Text, Button, ScrollView, WebView, Dimensions } from 'react-native';
import { IReduxLastPrice } from '../interface';
import { scaleSize } from '../util/size';

const height = 20;

interface IProps {
    title: string,
    data: Array<IReduxLastPrice>,
    // columns: Array<any>,
}

interface IState {

}

export default class LastPriceTable extends Component<IProps, IState> {
    constructor(props) {
        super(props);
    }

    renderTH = () => {
        return (
            <View style={styles.titleMain}>
                <Text style={[styles.title]}>时间</Text>
                <Text style={[styles.title, styles.titleRight]}>价格</Text>
                <Text style={[styles.title, styles.titleRight]}>数量</Text>
            </View>
        )
    }

    renderTBody = () => {
        const { data } = this.props;
        return (
            <View>
                {
                    data.map((v, index) => {
                        let time;
                        let timestamp = v.timestamp;
                        try {
                            time = new Date(Number(timestamp + '000')).toTimeString().slice(0, 8);
                        } catch {
                            time = '';
                        }
                        return (
                            <View style={styles.contentMain} key={`lastPrice-${index}`}>
                                <Text style={[styles.content]}>{time}</Text>

                                <Text style={[styles.content, styles.contentRight]}>
                                    {Number(v.price.toFixed(4))}
                                </Text>
                                <Text style={[styles.content, styles.contentRight]}>
                                    {Number(v.amount.toFixed(4))}
                                </Text>
                            </View>
                        )
                    })
                }
            </View>
        )
    }

    render() {
        return (
            <View>
                <Text style={{fontSize: scaleSize(14)}}>{this.props.title}</Text>
                <View>
                    {
                        this.renderTH()
                    }
                    {
                        this.renderTBody()
                    }
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    titleMain: {
        marginTop: scaleSize(3),
        display: 'flex',
        flexDirection: 'row',
        width: scaleSize(200),
        height: scaleSize(height)
    },
    title: {
        flex: 1,
        lineHeight: scaleSize(height),
    },
    titleRight: {
        textAlign: 'right',
    },
    titleLeft: {
        textAlign: 'left',
    },
    contentMain: {
        display: 'flex',
        flexDirection: 'row',
        width: scaleSize(200),
        height: scaleSize(height),
    },
    content: {
        flex: 1,
        lineHeight: scaleSize(height),
    },
    contentRight:{
        textAlign: 'right',
    },
    contentLeft: {
        textAlign: 'left',
    }
})